<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery.min-1.8.js"></script>
		<style type="text/css">
		
			div{
				height: 500px;
				width: 500px;
				background: powderblue;
				position: relative;
			}
			img{
				width: 100px;
			}
			.bbb1,.bbb{
				background: orange;
				margin: 0;
				float: left;
			}
			.bbb{
				background: #ccc;
			}
		</style>
	</head>
	<body>
		<p>111111111111111111111111111111111111111111111111111111111111111111</p>
		<h3>位置</h3>
		<h4>offset()----------------------获取相对于浏览器的绝对坐标</h4>
		<img src="img/0.png" style="background: orange;" class="aaa"/>
		<p>图片左上角坐标为：<span id="aaa"></span></p>
		<script type="text/javascript">
			x=$('.aaa').offset().left;
			y=$('.aaa').offset().top;
			
			$('#aaa').append(x + 'px —'+ y +'px')
		</script>
		
		<hr />
		<!--*********************************************************************-->
		
		
		222222222222222222222222222222222222222222222222222222222222222222222222222222
		<h4>position()-------------------子元素盒子相对于开启了定位的父元素的坐标，外边距算在子元素内</h4>
		<div>
			<img src="img/0.png" class="bbb1"/>
			<img src="img/1.png" class="bbb"/>
			
			<p>蝙蝠右上角相对于div的坐标：<span id="bbb"></span></p>
			<p>应该为100——0（hbulider自带浏览器有时不准）</p>
		</div>
		<script type="text/javascript">
			x=$('.bbb').position().left;
			y=$('.bbb').position().top; 
			$('#bbb').html(x+'px-'+y+'px')
		</script>
		<hr />
		<!--*********************************************************************-->
		
		33333333333333333333333333333333333333333333333333333333333333333333333333
		<h4>scrollTop(val)</h4>
		<p>屏幕以滚动的高度：<span class="ccc"></span></p>
		<script type="text/javascript">
			$(function(){
				$(window).scroll(function(){

					$('.ccc').html($(window).scrollTop())
				
				})
			})
		</script>
		<hr /><hr />
		<!--*********************************************************************-->
		
		
		<h3>三个高度</h3>
		<h4>可视区域的高----------------------$(winwow).height()</h4>
		<h4>文档总高度-------------------------$(document).height()</h4>
		<h4>滚动的高----------------------------$(winwow).scrollTop()</h4>
		<hr />
		
		<p>0001</p>
		<p>0002</p>
		<p>0003</p>
		<p>0004</p>
		<p>0005</p>
		<p>0006</p>
		<p>0007</p>
		<p>0008</p>
		<p>0009</p>
		<p>0010</p>
		<p>0011</p>
		<p>0012</p>
		<p>0013</p>
		<p>0014</p>
		<p>0015</p>
		<p>0016</p>
		<p>0017</p>
		<p>0018</p>
		<p>0019</p>
		<p>0020</p>
		<p>0021</p>
		<p>0022</p>
		<p>0023</p>
		<p>0024</p>
		<p>0025</p>
		<p>0026</p>
		<p>0027</p>
		<p>0028</p>
		<p>0029</p>
		<p>0030</p>
		<p>0031</p>
		<p>0032</p>
		<p>0033</p>
		<p>0034</p>
		<p>0035</p>
		<p>0036</p>
		<p>0037</p>
		<p>0038</p>
		<p>0039</p>
		<p>0040</p>
		<p>0041</p>
		<p>0042</p>
		<p>0043</p>
		<p>0044</p>
		<p>0045</p>
		<p>0046</p>
		<p>0047</p>
		<p>0048</p>
		<p>0049</p>
		<p>0050</p>
		<p>0051</p>
		<p>0052</p>
		<p>0053</p>
		<p>0054</p>
		<p>0055</p>
		<p>0056</p>
		<p>0057</p>
		<p>0058</p>
		<p>0059</p>
		<p>0060</p>
		<p>0061</p>
		<p>0062</p>
		<p>0063</p>
		<p>0064</p>
		<p>0065</p>
		<p>0066</p>
		<p>0067</p>
		<p>0068</p>
		<p>0069</p>
		<p>0070</p>
		<p>0071</p>
		<p>0072</p>
		<p>0073</p>
		<p>0074</p>
		<p>0075</p>
		<p>0076</p>
		<p>0077</p>
		<p>0078</p>
		<p>0079</p>
		<p>0080</p>
		<p>0081</p>
		<p>0082</p>
		<p>0083</p>
		<p>0084</p>
		<p>0085</p>
		<p>0086</p>
		<p>0087</p>
		<p>0088</p>
		<p>0089</p>
		<p>0090</p>
		<p>0091</p>
		<p>0092</p>
		<p>0093</p>
		<p>0094</p>
		<p>0095</p>
		<p>0096</p>
		<p>0097</p>
		<p>0098</p>
		<p>0099</p>
		<p>0100</p>
	</body>
</html>
